<ui:composition template="template.xhtml"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:richext="http://code.google.com/p/richfaces-ext"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:a4j="http://richfaces.org/a4j"
		xmlns:rich="http://richfaces.org/rich">
    <ui:define name="body">
    	<h3><span>captcha </span> Captcha with a JSF Validator</h3>
	    <f:view>
		    <h:form id="form1">
				<richext:captcha id="myCaptcha" />
				<br />
				<h:outputText value="Captcha Text: " />
		        <h:panelGroup>
					<h:inputText id="secureText" value="#{captchaController.secureText}" required="true">
						<!--  the captchaId should be equal to the id of captcha component -->
						<richext:captchaValidator id="captchaValidator" captchaId="myCaptcha" />
					</h:inputText>							
					<h:message for="secureText" errorClass="errorMessage" />
		        </h:panelGroup>
				<br />
				<br />
		        <h:commandButton id="btn_submit" value="Submit" />
			</h:form>
	    </f:view>
      	<p class="more"><a href="#{request.requestURI}.source">SOURCE</a></p>
    </ui:define>
</ui:composition>